<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>组件的创建</h2>
      <!-- 组件的使用 -->
      <!-- <tb-header></tb-header> -->
      <!-- 因为h5是不区分大小写的 -->
      <!-- 不管定义用连字符或者大驼峰，调用一律使用连字符 -->
      <tb-header></tb-header>
      <tb-header></tb-header>
      <tb-body></tb-body>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {};
        },
      });

      // 全局创建组件
      // component里面需要传入两个参数,第一个参数是组件名称，第二个参数是组件的选项组成选项对象
      // 第二个参数里面有一个属性必不可少的，是template

      // 组件的取名规范
      // 顾名思义
      // 不能和已有的标签相重复,不要和未来可能存在的标签重复
      // 建议使用连字符或者大驼峰
      // app.component("tb-header", {
      //   template: "<header>我是淘宝的头部</header>",
      // });
      app.component("TbHeader", {
        template: "<header>我是淘宝的头部 - {{ count }}</header>",
        // 以前data是可以写成对象的形式
        // 因为组件复用的时候，如果写成对象，那么当一个组件的变量发生改变的时候，另外一个也会跟着变
        // 写成函数返回对象，就有了函数的作用域，组件的数据就可以单独维护自己的数据
        data() {
          return {
            count: 10,
          };
        },
        mounted() {
          console.log("头部被加载了");
        },
      });

      app.component("TbBody", {
        template: `
          <main>
            <div>内容1</div>
            <div>内容2</div>
          </main>
        `,
        // mounted() {
        //   console.log(this.count);
        // },
      });

      app.mount("#app");
    </script>
  </body>
</html>
